<template>
  <div class="userlist">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="search">
      <input type="text" v-model="searchUser.query" />
      <button class="search" @click="search">搜索</button>
      <button class="add" @click="openDialog('add')">添加用户</button>
    </div>
    <el-card class="box-card">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="username" label="姓名"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column prop="my_state" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              @change="
                statusChange({ id: scope.row.id, bool: scope.row.mg_state })
              "
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="btns">
              <el-button
                icon="el-icon-edit"
                size="mini"
                type="primary"
                @click="openDialog('edit', scope.row.id)"
              ></el-button>
              <el-button
                icon="el-icon-delete"
                size="mini"
                type="danger"
                @click="openDialog('del', scope.row.id)"
              ></el-button>

              <el-tooltip
                class="item"
                effect="dark"
                content="分配角色"
                placement="top"
                :enterable="false"
              >
                <el-button
                  icon="el-icon-s-tools"
                  size="mini"
                  type="warning"
                  @click="openDialog('allocation', scope.row.id)"
                ></el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 对话框   -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <!-- 修改框 -->
      <el-form
        v-if="titleType == 'edit'"
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="70px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            type="username"
            v-model="ruleForm.username"
            autocomplete="off"
            :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            type="text"
            v-model="ruleForm.email"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model.number="ruleForm.mobile"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit(ruleForm)">确认</el-button>
        </el-form-item>
      </el-form>

      <!-- 添加 -->
      <el-form
        v-if="titleType == 'add'"
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="70px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            type="username"
            v-model="ruleForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model.number="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model.number="ruleForm.mobile"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit(ruleForm)">确认</el-button>
        </el-form-item>
      </el-form>

      <!-- 删除 -->
      <el-form
        v-if="titleType == 'del'"
        :title="title"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form-item>
          <p>
            <i class="el-icon-warning" style="color: orange"></i
            ><span>确定删除吗？</span>
          </p>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit(ruleForm)">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { roleListAPI, editusertAPI, delusertAPI, addusertAPI, searchAPI, statusAPI } from '@/api/user.js'
export default {
  components: {},
  name: '',
  data () {
    return {
      disabled: true,
      title: 'edit',
      titleType: '',
      dialogVisible: false,
      total: 0,
      tableData: [],
      info: {
        pagenum: 1,
        pagesize: 2,

      },
      searchUser: {
        query: '',
        pagenum: 1,
        pagesize: 2,
      },
      //-----
      ruleForm: {
        id: null,
        password: '',
        username: '',
        email: '',
        mobile: ''
      },
      delid: null,
      //规则
      rules: {

      }
    }
  },
  created () {
    this.initData()

  },
  computed: {
    // isTrue () {
    //   return
    // }
  },
  methods: {
    //修改状态
    async statusChange (obj) {
      const res = await statusAPI(obj)

      console.log(res, 'status');
    },
    //搜索
    async search () {
      const res = await searchAPI(this.searchUser)
      // console.log(this.searchUser, 'this.searchUser');
      console.log(res, 'searchUser');
      if (this.searchUser.query.trim().length !== 0) {
        this.total = res.data.total
        this.tableData = res.data.users
        // this.initData()
      }
      // this.searchUser.query = ''
      // this.total = res.data.total
      // this.tableData = res.data.users
    },

    //点击取消
    cancel () {
      this.closeDialog()
    },

    //点击确认
    async submit (ruleForm) {
      // 编辑
      if (this.titleType == 'edit') {
        const res = await editusertAPI(ruleForm)
        console.log(res, 'res111');
        this.tableData = this.tableData.filter(item => item.id != res.data.id)
        this.tableData.unshift(res.data)
      }
      //删除
      if (this.titleType == 'del') {
        console.log(this.delid);
        //当数据为最后一条时，当前页码减1
        if (this.tableData.length == 1) {
          this.info.pagenum--
        }
        await delusertAPI(this.delid)
        this.initData()
      }

      //添加
      if (this.titleType == 'add') {
        const res = await addusertAPI(this.ruleForm)
        console.log(res, 'add');
      }

      this.initData()
      this.ruleForm = {}
      this.closeDialog()
    },

    //对话框
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(() => {
          this.closeDialog()
          done()
        })
        .catch(() => { });
    },

    //关闭对话框
    closeDialog () {
      this.dialogVisible = false
    },

    //开启对话框
    openDialog (type, id) {
      this.dialogVisible = true

      //判断选择按钮
      if (type == 'edit') {
        this.title = '编辑用户'
        this.titleType = 'edit'
        //筛选   
        const obj = this.tableData.find(item => item.id == id)
        console.log(obj, 'obj');
        //数据回显
        // this.ruleForm.username = obj.username
        // this.ruleForm.email = obj.email
        // this.ruleForm.mobile = obj.mobile
        // this.ruleForm.id = obj.id
        this.ruleForm = { ...obj }
        console.log(this.ruleForm, 99);

      } else if (type == 'del') {
        this.title = '删除用户'
        this.titleType = 'del'
        this.delid = id
        // this.del(id)

      } else if (type == 'add') {
        this.title = '添加用户'
        this.titleType = 'add'

      } else {
        this.title = '分配角色'
        this.titleType = 'allocation'
      }

    },

    //对话框内容
    dialogContent () {

    },

    // 渲染
    async initData () {
      if (this.searchUser.query) {
        //如果有值，说明是搜索
        const res = await roleListAPI(this.searchUser)
        this.tableData = res.data.users
        this.total = res.data.total
        return
      }
      const res = await roleListAPI(this.info)
      console.log(res, 'list');
      this.tableData = res.data.users
      this.total = res.data.total
    },

    // 当前页面
    handleCurrentChange (val1) {
      this.info.pagenum = val1
      this.initData()
    },
    // 当前页面 数量
    handleSizeChange (val2) {
      console.log(val2, 'val2');
      this.info.pagenum = 1
      console.log(this.info.pagenum);
      this.info.pagesize = val2
      this.initData()
    }


  }
}
</script>
<style lang='less'  scoped>
.box-card {
  margin-top: 12px;
}
.btns {
  display: flex;
}
</style>
